// 通用工具组件

// 获取用户信息函数（保持兼容性）
function getUserInfo() {
    return Utils.getUserInfo();
}

// 通用数据表格组件
function DataTable({
    title, 
    description, 
    columns, 
    data, 
    loading, 
    onSearch, 
    searchPlaceholder, 
    searchValue,
    currentPage, 
    totalPages, 
    totalCount, 
    itemsPerPage,
    onPageChange,
    onItemsPerPageChange,
    actions = [],
    renderRowActions
}) {
    return React.createElement('div', { className: 'bg-card rounded-lg border shadow-sm' },
        // 标题
        React.createElement('div', { className: 'px-6 py-4 border-b' },
            React.createElement('div', null,
                React.createElement('h2', { className: 'text-2xl font-bold tracking-tight text-card-foreground' }, title),
                React.createElement('p', { className: 'text-sm text-muted-foreground mt-1' }, description)
            )
        ),
    
        // 搜索栏和操作按钮
        React.createElement('div', { className: 'px-6 py-4 border-b flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4' },
            React.createElement('div', { className: 'relative w-full max-w-md' },
                React.createElement('input', {
                    type: 'text',
                    placeholder: searchPlaceholder,
                    value: searchValue,
                    onChange: onSearch,
                    className: 'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50'
                }),
                React.createElement('div', { className: 'absolute right-3 top-1/2 transform -translate-y-1/2 text-muted-foreground' },
                    React.createElement('svg', { 
                        className: 'w-4 h-4',
                        fill: 'none',
                        stroke: 'currentColor',
                        viewBox: '0 0 24 24'
                    },
                        React.createElement('path', {
                            strokeLinecap: 'round',
                            strokeLinejoin: 'round',
                            strokeWidth: '2',
                            d: 'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'
                        })
                    )
                )
            ),
            React.createElement('div', { className: 'flex flex-wrap gap-2' },
                actions.map((action, index) => 
                    React.createElement('button', {
                        key: index,
                        onClick: action.onClick,
                        className: action.primary ? 
                            'inline-flex items-center justify-center gap-2 rounded-lg text-sm font-semibold transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-blue-600 text-white hover:bg-blue-700 hover:shadow-lg active:scale-95 h-10 px-5 py-2' :
                            'inline-flex items-center justify-center gap-2 rounded-lg text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-gray-300 bg-white hover:bg-gray-50 hover:border-gray-400 active:scale-95 h-10 px-5 py-2'
                    },
                        // 为主要按钮添加加号图标
                        action.primary && React.createElement('svg', {
                            className: 'w-4 h-4',
                            fill: 'none',
                            stroke: 'currentColor',
                            viewBox: '0 0 24 24',
                            xmlns: 'http://www.w3.org/2000/svg'
                        },
                            React.createElement('path', {
                                strokeLinecap: 'round',
                                strokeLinejoin: 'round',
                                strokeWidth: '2.5',
                                d: 'M12 4v16m8-8H4'
                            })
                        ),
                        // 为导入按钮添加上传图标
                        !action.primary && action.label.includes('导入') && React.createElement('svg', {
                            className: 'w-4 h-4',
                            fill: 'none',
                            stroke: 'currentColor',
                            viewBox: '0 0 24 24',
                            xmlns: 'http://www.w3.org/2000/svg'
                        },
                            React.createElement('path', {
                                strokeLinecap: 'round',
                                strokeLinejoin: 'round',
                                strokeWidth: '2',
                                d: 'M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12'
                            })
                        ),
                        action.label
                    )
                )
            )
        ),
    
        // 数据列表
        React.createElement('div', { className: 'overflow-x-auto' },
            loading ? (
                React.createElement('div', { className: 'p-8 text-center' },
                    React.createElement('div', { className: 'inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600' }),
                    React.createElement('p', { className: 'mt-2 text-gray-600' }, '加载中...')
                )
            ) : (
                React.createElement('table', { className: 'w-full' },
                    React.createElement('thead', { className: 'bg-gray-50' },
                        React.createElement('tr', null,
                            columns.map((column, index) => 
                                React.createElement('th', { 
                                    key: index, 
                                    className: 'px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider' 
                                }, column.title)
                            ),
                            renderRowActions && React.createElement('th', { 
                                className: 'px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider' 
                            }, '操作')
                        )
                    ),
                    React.createElement('tbody', { className: 'bg-white divide-y divide-gray-200' },
                        data.length > 0 ? (
                            data.map((item, rowIndex) => 
                                React.createElement('tr', { key: item.id || rowIndex, className: 'hover:bg-gray-50' },
                                    columns.map((column, colIndex) => {
                                        const value = typeof column.value === 'function' 
                                            ? column.value(item) 
                                            : item[column.field];
                                        return React.createElement('td', { 
                                            key: colIndex, 
                                            className: 'px-6 py-4 whitespace-nowrap text-sm text-gray-500' 
                                        }, value);
                                    }),
                                    renderRowActions && React.createElement('td', { className: 'px-6 py-4 whitespace-nowrap text-sm font-medium' },
                                        renderRowActions(item)
                                    )
                                )
                            )
                        ) : (
                            React.createElement('tr', null,
                                React.createElement('td', { 
                                    colSpan: columns.length + (renderRowActions ? 1 : 0), 
                                    className: 'px-6 py-8 text-center text-sm text-gray-500'
                                }, '暂无数据')
                            )
                        )
                    )
                )
            )
        ),
    
        // 分页
        !loading && React.createElement('div', null,
            Utils.Pagination({
                currentPage: currentPage,
                totalPages: totalPages,
                totalCount: totalCount,
                itemsPerPage: itemsPerPage,
                onPageChange: onPageChange,
                onItemsPerPageChange: onItemsPerPageChange
            })
        )
    );
}

// 将组件暴露到全局作用域，使其可被其他脚本访问
window.DataTable = DataTable;

// 注释掉重复的方法定义，避免与utils.js中的方法冲突
/*
// 注意：以下方法已在utils.js中定义，这里不再重复定义
Utils.fetchData = async (url, options = {}) => { ... }
Utils.createItem = async (url, data) => { ... }
Utils.updateItem = async (url, data) => { ... }
Utils.deleteItem = async (url) => { ... }
Utils.showAlert = (message, type = 'info') => { ... }
*/

// 将DataTable组件暴露到全局作用域，使其可被其他脚本访问
window.DataTable = DataTable;